<div id="editApplication" class="panel" scroll-top ng-class="{embeddedOnPage: applications.length === 1}">
    <form name="userForm" novalidate ng-submit="closeDialog()">
        <h2>{{application.label}}</h2>
        <div class="toolbar">
            <a id="editAppAddUser" href="#" ng-click="openUserModal()" onclick="return false;" class="addLink btnUserAddApp"><span>+</span>Add User</a>
            <div id="basicSearch">
                <div class="search">
                    <input search type="text" autocorrect="off" autocapitalize="off" placeholder="Search"
                           ng-model="data.query"
                           ng-change="search()"/>
                    <a href="#" class="clear">Clear Search</a>
                </div>
            </div>
        </div>

        <div id="usersList">
            <div class="tableContainer">
                <table sort-direction-icon>
                    <tr>
                        <th style="width:15%" class="_userID sortAscending" ng-click="sortBy('userID')">
                            <span class="colLabel">ID</span>
                        </th>
                        <th style="width:15%" class="_firstName" ng-click="sortBy('firstName')"><span class="colLabel">First Name</span></th>
                        <th style="width:15%" class="_lastName" ng-click="sortBy('lastName')"><span class="colLabel">Last Name</span></th>
                        <th style="width:31%" class="_userEmail" ng-click="sortBy('userEmail')"><span class="colLabel">Email</span></th>
                        <th style="width:8%" class="_write icon write" ng-click="sortBy('write')"><span class="colLabel">Write</span></th>
                        <th style="width:8%" class="_admin icon admin" ng-click="sortBy('admin')"><span class="colLabel">Admin</span></th>
                        <th style="width:8%" class="icon">Remove</th>
                    </tr>
                    <tr ng-repeat="user in pagedItems[currentPage - 1] | orderBy:orderByField:reverseSort">
                        <td class="app">
                            <a href="#" title="Edit" onclick="return false;" ng-click="openUserModal(user)">{{user.userID}}</a>
                        </td>
                        <td class="app">
                            {{user.firstName}}
                        </td>
                        <td class="app">
                            {{user.lastName}}
                        </td>
                        <td class="app">
                            {{user.userEmail}}
                        </td>
                        <td class="icon" ng-class="{'checked': userHasRole(user, 'write')}">
                            <span></span>
                        </td>
                        <td class="icon" ng-class="{'checked': userHasRole(user, 'admin')}">
                            <span></span>
                        </td>
                        <td class="icon">
                            <a class="command delete" href="#" title="Remove" onclick="return false;" ng-click="removeRoles(user)">
                                Delete
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="text-align:right">
                <span style="font-size:13px; color:#888; position: relative; top: -20px; left: -5px;">{{pageRangeStart()}} - {{pageRangeEnd()}} of {{totalItems}}</span>
                <div style="display: inline;">
                    <uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
                </div>
            </div>
        </div>

        <div class="buttonBar" ng-if="applications.length !== 1">
            <button class="blue cancel">Close</button>
        </div>
    </form>
</div>